<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>商品分类</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-flex.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <style>
    #ulList , #ulList .group{
  display: flex;
  flex-wrap:wrap;
  align-items: center;
  justify-content: space-between;
}
#ulList li {
  padding: 5px;
  border-radius: 5px;
  width: 50%
}
#ulList li>div{
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}
.videoPlayer {
  width: 100%;
  position: relative;
}

/* .videoPlayer::after {
  position: absolute;
  content: ' ';
  width: 0;
  height: 0;
  margin: 50%;
  left: -0.5rem;
  top: -1rem;
  border: 20px solid transparent;
  border-left: 30px solid #ccc;
}

.videoPlayer::before {
    position: absolute;
    content: ' ';
    width: 3rem;
    height: 3rem;
    margin: 50%;
    left: -1.5rem;
    top: -1.5rem;
    border: 1px solid #ccc;
    border-radius: 50%;
} */

#ulList .group_title{
    display: flex;
    align-items: flex-start;
    font-size: 14px;
    padding-left: 5px;
    margin-bottom: 5px;
}
#ulList .group_title>div{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
#ulList .group{
    padding: 0 5px;
    font-size: 10px;
    margin-bottom: 5px;
    color:#ccc;
}
#ulList .group .volume{
    padding: 0 5px;
    background: red;
    color:#fff;
    position: relative;
    overflow: hidden;
}
#ulList .group .volume::before{
    content: ' ';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    left: -2.5px;
    top:50%;
    margin-top: -2.5px
}
#ulList .group .volume::after{
    content: ' ';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    right: -2.5px;
    top:50%;
    margin-top: -2.5px
}
.recommend{
  display: flex;
  flex-wrap:wrap;
  align-items: center;
}
        #header{
            background: #fff;
        }
        #header .aui-bar{
            background:transparent;
            color:#000;
            border-bottom:1px solid #ccc;
        }
        #header .aui-bar .aui-btn .aui-icon-left{
            color:#000;
        }
        .aui-tab-item{font-size: .7rem;height: 1.8rem;line-height: 1.8rem;}
        .aui-tab-item.aui-active{border-color: #ff6b06;color: #ff6b06;}
        .sort-tab .aui-tab-item.aui-active{border:none;}
        .aui-searchbar-input{border-radius: 5rem;}
        #search_bar{width: 100%;z-index: 9999;}
        .aui-switch:checked{background-color: #FF512F;border-color: #FF512F;}
        .sortimg{display: inline-block;vertical-align: middle;width: 8px;}

        .aui-searchbar-input{border:1px solid #eee;}
        .tjp-icon{display: inline-block;vertical-align:text-bottom;margin-right: .5rem;}
        .tjp-icon img{width: 1rem;height: 1rem;vertical-align: middle;}
    </style>
</head>
<body>
    <div id="header">
        <header class="aui-bar aui-bar-nav">
            <a class="aui-pull-left aui-btn" onclick="closeWin();">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title" id='title'>分类</div>
        </header>
        <section class="aui-content bg-white" id="search_bar">
            <div class="aui-tab sort-tab" id="tab">
                <div class="aui-tab-item aui-active" data-sort="default" tapmode >综合</div>
                <div class="aui-tab-item sort" data-sort="sales" data-desc="none" tapmode>销量  <img src="../image/sort-default.jpg" class="sortimg" tapmode ></div>
                <div class="aui-tab-item sort" data-sort="quan_price" data-desc="none" tapmode>券额 <img src="../image/sort-default.jpg" class="sortimg" tapmode ></div>
                <div class="aui-tab-item sort" data-sort="rate" data-desc="none" tapmode>佣金 <img src="../image/sort-default.jpg" class="sortimg" tapmode ></div>
            </div>
        </section>
        <ul id="ulList">

        </ul>
    </div>
</body>
<script type="text/javascript" src="../script/api.js" ></script>
<script type="text/javascript" src="../script/aui-tab.js" ></script>
<script type="text/javascript" src="../script/zepto.min.js" ></script>
<script type="text/javascript" src="../script/doT.min.js" ></script>
<script type="text/javascript" src="../script/common.js" ></script>
<script type="text/javascript">
var title,renderLi, searchVal = '',
    sortVal = '0',
    min_idVal = '1';
    apiready = function(){
        api.parseTapmode();
        var header = $api.byId('header');
        var headerH =  $api.fixStatusBar(header);
        title = api.pageParam.title
        $api.html($api.byId('title'), title);
        getData()
        //tab切换
        var tab = new auiTab({
          element:document.getElementById("tab"),
          index:1,
          repeatClick:true
        },function(ret){
            $('.sort').not('.aui-active').attr('data-desc','none');
            $('.sort').not('.aui-active').find('img').attr('src','../image/sort-default.jpg');
            if (ret.index>1) {
                var desc = $(ret.dom).data('desc');
                if (desc=='none' || desc=='down') {
                    $(ret.dom).attr('data-desc','up');
                    $(ret.dom).find('img').attr('src','../image/sort-up.jpg');
                }else {
                    $(ret.dom).attr('data-desc','down');
                    $(ret.dom).find('img').attr('src','../image/sort-down.png');
                }
            }
            getData();
        });
        renderLi = doT.template($api.text($api.byId('templateLimit')));
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 100 //设置距离底部多少距离时触发，默认值为0，数字类型
            }
        }, function (ret, err) {
            getDataFrm()
        });
    };
    function getData(){
        var search = title;
        var sort = $('#tab .aui-active').data('sort');
        var desc = $('#tab .aui-active').data('desc')||'';
        var sortVal = '0';
        //0.综合（最新），1.券后价(低到高)，2.券后价（高到低），3.券面额，4.销量，5.佣金比例，6.券面额（低到高），7.月销量（低到高），8.佣金比例（低到高），9.全天销量（高到低），10全天销量（低到高），11.近2小时销量（高到低），12.近2小时销量（低到高），13.优惠券领取量（高到低）
        if(sort == 'default'){
            sortVal='0'
        }
        if(sort == 'sales'){
            if(desc == 'up'){
                sortVal='4'
            }else{
                sortVal='7'
            }
        }
        if(sort == 'quan_price'){
            if(desc == 'up'){
                sortVal='3'
            }else{
                sortVal='6'
            }
        }
        if(sort == 'rate'){
            if(desc == 'up'){
                sortVal='5'
            }else{
                sortVal='8'
            }
        }
        search = search ? search : ''

        var data = {
            search:search,
            sort:sortVal,
            min_id:'1',
            bool:true
        }
        console.log(JSON.stringify(data))
        getDataFrm(data)
    }
    function getDataFrm(data) {
        var search ,sort ,min_id ,bool ;

        if(data){
            search = data.search,sort = data.sort,min_id = data.min_id,bool = data.bool;
        }

        searchVal = search || search == '' ? search : searchVal
        sortVal = sort || sort == '0' ? sort : sortVal
        min_idVal = min_id ? min_id : min_idVal

        var urlTransform = window.urlTransformZGD(window.APIServerZGD.NineNine, {
            keywordVal: searchVal, //关键词
            sortVal: sortVal, //排序类型
            min_idVal: min_idVal, //分页
            typeVal: '1', //类别 今日上新
            backVal: '10', //分页条目
        })
        console.log(urlTransform)
        _Ajax(urlTransform, 'get', {}, 'json', function (ret) {
            if (ret.code === 1) {
                var _data = ret.data

                for (var i = 0; i < _data.length; i++) {
                    _data[i].item_id = _data[i].itemid
                    _data[i].is_tmall = _data[i].shoptype == 'B' ? '1' : '0'
                }

                if (bool) {
                    //改变搜索条件后重新数据列表
                    $api.html($api.byId('ulList'), renderLi(_data));
                } else {
                    $api.append($api.byId('ulList'), renderLi(_data));
                }

                min_idVal = ret.min_id
                //console.log(JSON.stringify(ret))
            } else {
                if ( ret.total=='0' && bool ) {
                    //改变搜索条件后无条目返回置空
                    $api.html($api.byId('ulList'), '');
                }
                console.log(JSON.stringify(ret))
            }
        });
    }
</script>
<script id="templateLimit" type="text/x-dot-template">
    {{ for (var key in it){ }}

    <li onclick='open_goods({{= JSON.stringify( it[key] ) }})'>
      <div>
        <div class='videoPlayer'>
          <img src={{= it[key]['itempic']+'_500x500.jpg' }}>
        </div>
        <div class='group_title'>
          {{= it[key]['shoptype'] == 'B' ? '<img src="../image/tmall.png" style="width:0.6rem;margin:5px;">':'<img src="../image/taobao.png" style="width:0.6rem;margin:5px;">' }}
          <div>{{= it[key]['itemtitle'] }}</div>
        </div>
        <div class='group'>
            <span>原价:<span style='text-decoration:line-through;'>¥{{= it[key]['itemprice'] }}</span></span>
            <span>{{= it[key]['itemsale'] }}人已买</span>
        </div>
        <div class='group'>
            <span style='color:red;'>¥<span style='font-size:14px;'>{{= it[key]['itemendprice'] }}</span></span>
            <span class='volume'>{{= it[key]['couponmoney'] }}元券</span>
        </div>
      </div>
    </li>

    {{ } }}
</script>



</html>
